<template>
  <div>
    <a-card class="cardBox coreIndex">
      <div class="tit" slot="title">核心指标 <span>(更新频率：实时)</span><div class="nowTime">{{ nowtime | updatetime }} 星期{{ week|getweek }}</div></div>
      <div class="content">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-card>
              <div class="tit" slot="title">企业服务</div>
              <div class="items" v-for="(item, i) in coreIndexL" :key="i">
                <div :class="`item ${i===0?'itemCursor':''}`" @click="coreClick(item, i)">
                  <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
                  <div class="num">{{ item.num }}
                    <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
                  </div>
                  <div class="name">{{ item.name }}({{item.unit}}) <!--{{i===0?'>':''}}--></div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card>
              <div class="tit" slot="title">剧组服务</div>
              <div class="items" v-for="(item, i) in coreIndexC" :key="i">
                <div :class="`item ${i===0?'itemCursor':''}`" @click="coreClick(item, i)">
                  <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
                  <div class="num">{{ item.num }}
                    <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
                  </div>
                  <div class="name">{{ item.name }}({{item.unit}}) {{i===0?'>':''}}</div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card>
              <div class="tit" slot="title">人才服务</div>
              <div class="items" v-for="(item, i) in coreIndexR" :key="i">
                <div :class="`item ${i===0?'itemCursor':''}`" @click="coreClick(item, i)">
                  <div :class="`ico ico${i}`"><i :class="`iconfont ${item.ico}`"></i></div>
                  <div class="num">{{ item.num }}
                    <span v-if="item.ratio"><a-icon type="pie-chart" :style="{ color: '#6a92ed' }" /> {{item.ratio}}</span>
                  </div>
                  <div class="name">{{ item.name }}({{item.unit}}) {{i===0?'>':''}}</div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-card>
    <a-modal v-model="coreVisible" width="88%" :footer="null" :centered="true" :title="coreTit">
      <a-row :gutter="16" v-if="coreIndex===0">
        <a-col :span="16">
          <dv-charts :option="coreOption" style="width: 100%; height: 340px" />
        </a-col>
        <a-col :span="8">
          <dv-charts :option="serviceOption" style="width: 100%; height: 340px" />
        </a-col>
      </a-row>
      <div v-if="coreIndex===1">
        <dv-charts :option="crewOption" style="width: 100%; height: 340px" />
      </div>
      <div v-if="coreIndex===2">
        <dv-charts :option="peopleOption" style="width: 100%; height: 340px" />
      </div>
    </a-modal>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'HytBoard2',
    filters: {
      updatetime: function (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
      },
      getweek (e) {
        var week = ['一', '二', '三', '四', '五', '六', '日']
        return week[e - 1]
      }
    },
    data () {
      return {
        coreIndex: null,
        coreTit: '',
        coreVisible: false,
        timer: null,
        nowtime: new Date(),
        week: moment().format('E'),

        coreIndexL: [
          { type: 0, ico: 'icon-guoji', num: '1,499', unit: '家', name: '入区企业' },
          { type: 0, ico: 'icon--fuwu', num: '215', unit: '家', name: '服务覆盖', ratio: '14.34%' },
          { type: 0, ico: 'icon-fazhanguanli', num: '165.76', unit: '亿元', name: '年度累计营收' }
        ],
        coreIndexC: [
          { type: 1, ico: 'icon-zhishu', num: '269', unit: '个', name: '剧组' },
          { type: 1, ico: 'icon-daohangjuzu', num: '55', unit: '个', name: '在拍剧组', ratio: '20.45%' },
          { type: 1, ico: 'icon-a-zu17545', num: '1,432', unit: '次', name: '线上勘景' }
        ],
        coreIndexR: [
          { type: 2, ico: 'icon-jujiqu-01', num: '117,341', unit: '人', name: '影视人才' },
          { type: 2, ico: 'icon-huoyuerenshu', num: '15,720', unit: '人', name: '活跃人数', ratio: '13.39%' },
          { type: 2, ico: 'icon-renshu', num: '6,593', unit: '人', name: '横影通用户' }
        ],
        coreOption: {
          grid: {
            top: 15, left: 40, right: 15, bottom: 25
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            data: 'value',
            min: 0,
            max: 1600
          },
          series: [
            {
              name: '企业数',
              data: [1415, 1422, 1434, 1437, 1450, 1462, 1466, 1473, 1482, 1488, 1499],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 14,
                  rotate: 45
                }
              },
              type: 'bar',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              },
              animationCurve: 'easeOutBounce'
            }
          ]
        }, // 入园各月数据
        serviceOption: {
          title: {
            text: '服务覆盖率'
          },
          series: [
            {
              type: 'gauge',
              data: [ { name: 'itemA', value: 81.05, gradient: ['#ed9746', '#f1b441'] } ],
              radius: '75%',
              axisLabel: {
                style: {
                  fill: '#777'
                },
                formatter: '{value}%'
              },
              details: {
                show: true,
                offset: [0, 40],
                formatter: '{value}%'
              },
              animationCurve: 'easeOutBack'
            }
          ]
        },
        crewOption: {
          title: {
            text: '影视拍摄情况'
          },
          legend: {
            data: [
              {
                name: '已杀青',
                color: '#aeeff0'
              },
              {
                name: '在拍',
                color: '#aeeff0'
              },
              {
                name: '筹拍',
                color: '#aeeff0'
              },
              {
                name: '人流量',
                color: '#f1829f'
              }
            ]
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: [
            {
              name: '剧组',
              data: 'value',
              min: 0,
              max: 300
            },
            {
              name: '勘景',
              data: 'value',
              position: 'right',
              min: 0,
              max: 1600,
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '线上勘景',
              data: [863, 986, 1020, 1067, 1156, 1254, 1288, 1309, 1338, 1413, 1432],
              type: 'line',
              smooth: true,
              lineArea: {
                show: true,
                gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
              },
              lineStyle: {
                stroke: 'rgba(251, 114, 147, 1)',
                lineDash: [3, 3]
              },
              linePoint: {
                style: {
                  stroke: 'rgba(251, 114, 147, 1)'
                }
              },
              yAxisIndex: 1
            },
            {
              name: '已杀青',
              data: [37, 50, 78, 121, 153, 202, 222, 231, 263, 270],
              type: 'bar',
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            },
            {
              name: '在拍',
              data: [8, 10, 13, 15, 18, 20, 26, 30, 48, 52, 55],
              type: 'bar',
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            },
            {
              name: '筹拍',
              data: [17, 22, 25, 28, 32, 37, 41, 46, 52, 55, 60],
              type: 'bar',
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            }
          ]
        }, // 剧组各月数据
        peopleOption: {
          title: {
            text: '影视人才情况'
          },
          legend: {
            data: ['影视人才', '活跃人数', '横影通用户']
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            data: 'value'
          },
          series: [
            {
              name: '影视人才',
              data: [87927, 90876, 93456, 96724, 102894, 105088, 107560, 109563, 112638, 115089, 117341],
              type: 'bar',
              stack: 'a'
            },
            {
              name: '活跃人数',
              data: [8792, 9087, 9345, 9672, 10289, 10588, 11056, 11953, 12638, 14367, 15720],
              type: 'bar',
              stack: 'a'
            },
            {
              name: '横影通用户',
              data: [8792, 9087, 9345, 9672, 10289, 10588, 11056, 11953, 12638, 14367, 6593],
              type: 'bar',
              stack: 'a'
            }
          ]
        } // 人才各月数据
      }
    },
    mounted () {
      const _this = this
      this.timer = setInterval(() => {
        _this.nowtime = new Date()
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    watch: {
      coreVisible (val) {
        if (!val) {
          this.coreIndex = null
        }
      }
    },
    methods: {
      coreClick (data, i) {
        if (i > 2) return
        this.coreIndex = data.type
        this.coreTit = data.name
        this.coreVisible = true
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .coreIndex {
    .content {
      /*display: grid; grid-template-columns: 1fr 1fr 1fr;*/
    }
    .tit span {font-size: 15px; color: #666}
    .tit .nowTime { display: inline-block; float: right; font-weight: normal}
    .items {
      padding: 10px 0 10px 10px;
      /*text-align: center;*/
      .item {
        display: inline-block;
        text-align: left;
        margin: auto;
        position: relative;
        padding-left: 60px;
      }
      .itemCursor {cursor: pointer;
        .name {color: #37a2da}
      }
      .ico {
        position: absolute;
        left: 0;
        text-align: center;
        top: 8px;
        width: 50px;
        line-height: 50px;
        height: 50px;
        background: #4194fb;
        border-radius: 50%;
      }
      .ico0{ background: #E85894}
      .ico1{ background: #a970e1}
      .ico2{ background: #6a92ed}
      .ico3{ background: #6792ec}
      .ico4{ background: #e85895}
      .ico5{ background: #ea7146}
      .ico6{ background: #ed9720}
      .ico7{ background: #61c1f8}
      .ico8{ background: #a970e1}

      .iconfont {  font-size: 30px; color: #fff;}
      .num {
        font-size: 32px; line-height: 40px;
        font-weight: 500; display: flex;
        color: rgba(0, 0, 0, 0.6);
        span {padding-top: 8px; font-weight: initial;
          line-height: 32px; font-size: 15px; margin-left: 5px; color: #777 }
      }

      .name {
        display: inherit; font-size: 15px;
      }
    }

  }
</style>
